<template>
    <div class="index" >
      <el-form label-position="top" :model="operateForm" :inline="true" :rules="operateFormRules" ref="operateFormRules"  >
      <el-card class="index">
        <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
        <el-row>
          <el-col :span="6">
                <el-form-item label="商户类型" prop="alt_merchant_type"  style="width: 100%;">
                  <el-select clearable v-model="operateForm.alt_merchant_type" style="width: 80%;"  @change="enterpriseChange"  placeholder="请选择商户类型">
                     <el-option
                       v-for="item in companyTypeList"
                       :key="item.value"
                       :label="item.lable"
                       :value="item.value">
                     </el-option>
                    </el-select>
                </el-form-item>
            </el-col>
             <el-col :span="6">
                <el-form-item label="分账方登录名" prop="login_name"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.login_name" style="width: 80%;" placeholder="请输入分账方登录名" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="分账方全称" prop="alt_mch_name"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.alt_mch_name" style="width: 80%;" placeholder="请输入分账方全称" clearable  />
                </el-form-item>
            </el-col>
             <el-col :span="6">
                <el-form-item label="分账方简称" prop="alt_mch_short_name"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.alt_mch_short_name" style="width: 80%;" placeholder="请输入分账方简称" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="业务联系人姓名" prop="busi_contact_name"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.busi_contact_name" style="width: 80%;" placeholder="请输入联系人姓名" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="业务联系人手机" prop="busi_contact_mobile_no"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.busi_contact_mobile_no" style="width: 80%;" placeholder="请输入联系人手机" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item :label="operateForm.alt_merchant_type == '10' ? '个人手机号': '法人手机号'" prop="phone_no"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.phone_no" style="width: 80%;" placeholder="请输入手机号码" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item :label="operateForm.alt_merchant_type == '10' ? '个人姓名': '法人姓名'" prop="legal_person"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.legal_person" style="width: 80%;" placeholder="请输入姓名" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6">
                <el-form-item label="身份证号" prop="id_card_no"  style="width: 100%;">
                  <el-input  v-model.trim="operateForm.id_card_no" style="width: 80%;" placeholder="请输入身份证号" clearable  />
                </el-form-item>
            </el-col>
            <el-col :span="6" v-if="operateForm.alt_merchant_type != '10'">
                <el-form-item label="营业执照编号"  prop="license_no"  style="width: 100%;">
                  <el-input   v-model.trim="operateForm.license_no" style="width: 80%;" placeholder="请输入营业执照编号"   clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
            <el-form-item label="结算方式" prop="sett_mode"  style="width: 100%;">
              <el-select clearable v-model="operateForm.sett_mode" style="width: 80%;"  @change="enterpriseChange"  placeholder="请选择结算方式">
                     <el-option
                       v-for="item in settlementList"
                       :key="item.value"
                       :label="item.lable"
                       :value="item.value">
                     </el-option>
                    </el-select>
            </el-form-item>
           
          </el-col>
          <el-col :span="6">
            <el-form-item label="结算周期类型" prop="sett_date_type"  style="width: 100%;">
              <el-select clearable v-model="operateForm.sett_date_type" style="width: 80%;"  @change="enterpriseChange"  placeholder="请选择结算周期类型">
                     <el-option label="工作日" value="1" /> 
                     <el-option label="自然日" value="2" /> 
                     <el-option label="月结日" value="3" /> 
               </el-select>
            </el-form-item>
            </el-col>
          <el-col :span="6">
                <el-form-item label="结算周期"  prop="risk_day"  style="width: 100%;">
                  <el-input type="number" max="28" min="1" v-model.trim="operateForm.risk_day" style="width: 80%;" placeholder="请输入结算周期"   clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="结算账户类型" prop="bank_account_type"  style="width: 100%;">
              <el-select clearable v-model="operateForm.bank_account_type" style="width: 80%;"  @change="enterpriseChange"  placeholder="请选择结算账户类型">
                     <el-option label="借记卡" value="1" /> 
                     <el-option label="对公账户" value="4" /> 
               </el-select>
            </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账户名称"  prop="bank_account_name"  style="width: 100%;">
                  <el-input   v-model.trim="operateForm.bank_account_name" style="width: 80%;" placeholder="请输入银行账户名称"   clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="银行账号"  prop="bank_account_no"  style="width: 100%;">
                  <el-input   v-model.trim="operateForm.bank_account_no" style="width: 80%;" placeholder="请输入银行账号"   clearable/>
                </el-form-item>
            </el-col>
            <el-col :span="6" v-if="operateForm.bank_account_type == 4">
              <el-form-item label="联行号"  prop="bank_channel_no"  style="width: 100%;">
                  <el-input   v-model.trim="operateForm.bank_channel_no" style="width: 80%;" placeholder="请输入银行账号"   clearable/>
                </el-form-item>
            </el-col>
        </el-row>
    </el-card>
  </el-form>
  </div>
</template>

<script>
import { arealist , getTopMccByType } from '@/api/api'
export default{
    props:{
      regionList:[Array],
      secondaryList:[Array],
      mccList1:[Array],
      dLimitList:[Array],
      minProfitRate:[String,Number]
    },
    watch:{
      operateForm(nValue){
        this.$emit('operateFormChange',nValue)
        deep:true
      },
    },
    data(){
        return{
            uploadUrl: process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/`,
            token: { token: sessionStorage.getItem("token") },
            operateForm:{
              // bankId:'134637'
            },
            operateFormRules:{
              alt_merchant_type:[{ required: true, message: '请选择商户类型', trigger: 'change' }],
              login_name:[{ required: true, message: '请输入分账方登录名', trigger: 'blur' }],
              alt_mch_name:[{ required: true, message: '请输入分账方全称', trigger: 'blur' }],
              alt_mch_short_name:[{ required: true, message: '请输入分账方简称', trigger: 'blur' }],
              busi_contact_name:[{ required: true, message: '请输入业务联系人姓名', trigger: 'blur' }],
              busi_contact_mobile_no:[{ required: true, message: '请输入业务联系人手机', trigger: 'blur' }],
              legal_person:[{ required: true, message: '请输入法人姓名', trigger: 'blur' }],
              id_card_no:[{ required: true, message: '请输入法人身份证号', trigger: 'blur' }],
              license_no:[{ required: true, message: '请输入营业执照编号', trigger: 'blur' }],
              sett_mode:[{ required: true, message: '请选择结算方式', trigger: 'change' }],
              sett_date_type:[{ required: true, message: '请选择结算周期类型', trigger: 'change' }],
              risk_day:[{ required: true, message: '请输入结算周期', trigger: 'blur' },
                        {required: true, validator:(rule , value , callback)=>{
                              if(value >=1 && value<=28){
                                  callback();
                              }else{
                                  callback(new Error('结算周期的范围值为1-28！'))
                              }
                           } }
              ],
              bank_account_type:[{ required: true, message: '请选择结算账户类型', trigger: 'change' }],
              bank_account_name:[{ required: true, message: '请输入银行账户名称', trigger: 'blur' }],
              bank_account_no:[{ required: true, message: '请输入银行账号', trigger: 'blur' }],
              bank_channel_no:[{ required: true, message: '请输入联行号', trigger: 'blur' }],
              phone_no:[{ required: true, message: '请输入手机号', trigger: 'blur' }],
              
            },
           companyTypeList:[{ value:'10',lable:'个人'}, { value:'11',lable:'个体工商户'} , { value:'12',lable:'企业'} ], //公司类型, //公司类型
           settlementList:[{value:'1',lable:'自动结算'},{value:'2',lable:'手工结算'},{value:'3',lable:'手工+D0 结算'},{value:'4',lable:'自动+D0 结算'}],
        }
    },
    methods:{
      // 
      dlowPorated(){
        let elink = document.createElement('a');
        elink.href = 'https://sdd-merchant.oss-cn-shanghai.aliyuncs.com/addMerchant/huifu.docx'
        elink.click();
        loading.close();
      },
    async  enterpriseChange1(v){
      const res = await getTopMccByType({channelType:'16',level:2 , parentId:v})
      this.mccList2 = res.data
      this.operateForm.mccId2 = ''
      this.operateForm.mccId = ''
      },
      async enterpriseChange2(v){
        const res = await getTopMccByType({channelType:'16',level:3 , parentId:v})
        this.mccList3 = res.data
        this.operateForm.mccId = ''
      },
      beforeUploadImgF03(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F03/16/1`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF03(file){
        if(file.code == 200){
           this.operateForm.pIdcardAFileId = file.data.file_id
           this.operateForm.pIdcardA = file.data.file_url
           this.operateForm.legalName = file.data.name
           this.operateForm.legalCertNo = file.data.idNumber
           this.operateForm.legalAddr = file.data.address
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      licenseChange(v){
        if(v == '1'){
           this.operateForm.businessLicenceExpire = '29991231'
        }else{
          this.operateForm.businessLicenceExpire = ''
        }
      },
      legalChange(v){
        if(v == '1'){
           this.operateForm.legaCertExpire = '29991231'
        }else{
          this.operateForm.legaCertExpire  = ''
        }
      },
      certChange(v){
        if(v == '1'){
           this.operateForm.principalCertExpire = '29991231'
        }else{
          this.operateForm.principalCertExpire  = ''
        }
      },
      beforeUploadImgF02(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F02/16/1`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF02(file){
        if(file.code == 200){
           this.operateForm.pIdcardBFileId = file.data.file_id
           this.operateForm.pIdcardB = file.data.file_url
           this.operateForm.legalCertStt = file.data.validPeriodStat.replace(/-/g, "")
           if(file.data.validPeriodEnd == '' || file.data.validPeriodEnd == '29991231'){
             this.operateForm.legalCertValidityType = '1'
             this.operateForm.legaCertExpire = '29991231'
           }else{
             this.operateForm.legaCertExpire = file.data.validPeriodEnd.replace(/-/g, "")
           }

        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF41(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F41/16/0`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF41(file){
        if(file.code == 200){
           this.operateForm.pLicenseFileId = file.data.file_id
           this.operateForm.pLicense = file.data.file_url
           this.operateForm.merchantName = file.data.companyName
           this.operateForm.businessLicence = file.data.creditCode
           this.operateForm.merchantAddress = file.data.businessAddress
           this.operateForm.businessLicenceStt = file.data.validFromDate.replace(/-/g, "")
           if(file.data.validToDate == '' || file.data.validToDate == '29991231'){
              this.operateForm.licenseValidityType = '1'
              this.operateForm.businessLicenceExpire = '29991231'
           }else{
              this.operateForm.businessLicenceExpire = file.data.validToDate.replace(/-/g, "")
           }
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF22(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F22/16/4`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF22(file){
        if(file.code == 200){
           this.operateForm.pOutsideFileId = file.data.file_id
           this.operateForm.pOutside = file.data.file_url
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF24(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F24/16/4`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF24(file){
        if(file.code == 200){
           this.operateForm.pInsideFileId = file.data.file_id
           this.operateForm.pInside = file.data.file_url
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF105(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F24/16/4`
                setTimeout(() => {
                    resolve() 
                }, 100)
                
          })
      },
      doorUpLoadSuccessF105(file){
        if(file.code == 200){
           this.operateForm.pCashierFileId = file.data.file_id
           this.operateForm.pCashier = file.data.file_url
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF13(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F13/16/2`
                setTimeout(() => {
                    resolve() 
                }, 100)
          })
      },
      doorUpLoadSuccessF13(file){
        if(file.code == 200){
           this.operateForm.pBankcardAFileId = file.data.file_id
           this.operateForm.pBankcardA = file.data.file_url
           this.operateForm.accountCardNum = file.data.cardNumber
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF08(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F08/16`
                setTimeout(() => {
                    resolve() 
                }, 100)
          })
      },
      doorUpLoadSuccessF08(file){
        if(file.code == 200){
           this.operateForm.pOpenAccountFileId = file.data.file_id
           this.operateForm.pOpenAccount = file.data.file_url
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF56(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F56/16/1`
                setTimeout(() => {
                    resolve() 
                }, 100)
          })
      },
      doorUpLoadSuccessF56(file){
        if(file.code == 200){
           this.operateForm.pBankIdcardAFileId = file.data.file_id
           this.operateForm.pBankIdcardA = file.data.file_url
           this.operateForm.principalCertNo = file.data.idNumber

        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF55(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F55/16/1`
                setTimeout(() => {
                    resolve() 
                }, 100)
          })
      },
      doorUpLoadSuccessF55(file){
        if(file.code == 200){
           this.operateForm.pBankIdcardBFileId = file.data.file_id
           this.operateForm.pBankIdcardB = file.data.file_url
           this.operateForm.principalCertStt = file.data.validPeriodStat.replace(/-/g, "")
           if(file.data.validPeriodEnd == '' || file.data.validPeriodEnd == '29991231'){
              this.operateForm.certValidityType = '1'
              this.operateForm.principalCertExpire = '29991231'
           }else{
              this.operateForm.principalCertExpire = file.data.validPeriodEnd.replace(/-/g, "")
           }
           console.log(this.operateForm.principalCertStt)
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      beforeUploadImgF520(){
        return new Promise((resolve, reject) => {
               this.uploadUrl = process.env.VUE_APP_BASE_URL + `/mini/v5/sbapi/merchant/upload/F520/16/4`
                setTimeout(() => {
                    resolve() 
                }, 100)
          })
      },
      doorUpLoadSuccessF520(file){
        if(file.code == 200){
           this.operateForm.pUnincorporatedFileId = file.data.file_id
           this.operateForm.pUnincorporated = file.data.file_url
        }else{
          this.$message.error(file.message)
        }
        this.$forceUpdate()
      },
      geRegionChange(v){
        this.operateForm.mccId = v[2]
      },
      detailRegionChange(v){
        this.operateForm.areaId = v[2]
      }
    }
}
</script>

<style scoped>
   .index{
    width: 100%;
    margin-bottom: 30px;
   }
   .clearfix{
    display: flex;
    align-items: center;
    justify-content: space-between;
   }
   .avatar{
    width: 112px;
    height: 102px;
  }
.avatar-none{
    width: 112px;
    height: 102px;
}
::v-deep .el-form-item--small.el-form-item{
    /* text-align: center; */
    /* margin-right: 130px; */
}
::v-deep .el-col{
    display:flex;
    /* justify-content:space-between; */

}
::v-deep .el-upload--text{
    width: 112px !important;
    border: none !important;
}
.dlowClass{
  position:absolute;
  top:-41px;
  right:-30px;
}
</style>